<template>
    <div class="login-container">
        <van-nav-bar title="商品列表" class="nav-bar" />

        
    <div v-for="item in listdata" class="list">
        <h3>{{ item.name }}</h3>
        <van-grid :gutter="10">
            <van-grid-item v-for="value in item.children" :key="value" icon="photo-o" :text="value.name" @click="clickgoods(value.id)" />
        </van-grid>
    </div>




    </div>



</template>



<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import axios from 'axios'


const listdata = ref([])


const goodData = () => {
    axios.get('http://127.0.0.1:8000/goods/goods/').then(res => {
        listdata.value = JSON.parse(res.data)
    })
}

onMounted(() => {
    goodData()
})



const clickgoods = (id) => {
    console.log(id)
    // axios.get('http://127.0.0.1:8000/goods/goodsc/?c_id='+id ).then(res => {
    //     console.log(res)
    // })
    router.push({
        path: '/buy',
        query: {
            c_id: id
        }
    })
}


</script>



<style scoped>


.login-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.list {
    margin: 10px;
}


</style>